<template>
    <div class="contact-body">

        <FullHeadImg backImage="contact/contact_head_bg.png">
        </FullHeadImg>

        <section class="contact-desc body-m">
            <h2>
                Our experts are ready to help you grow your business!
            </h2>
            <ul class="flex-row">
                <li class="gradient-card" v-for="(item, idx) in features" :key="idx">
                    <img :src="getImage(item.img)" alt="">
                    <div>{{ item.desc }}</div>
                </li>
            </ul>
        </section>

        <section class="contact-form body-m">
            <el-form :model="form" size="large" :rules="rules" status-icon ref="ruleFormRef">
                <el-form-item prop="name">
                    <el-input placeholder="Name *" v-model="form.name" required />
                </el-form-item>
                <el-form-item prop="companyName">
                    <el-input placeholder="Company Name *" v-model="form.companyName" required />
                </el-form-item>
                <el-form-item prop="companyWebsite">
                    <el-input placeholder="Company Websites *" v-model="form.companyWebsite" required />
                </el-form-item>
                <el-form-item prop="email">
                    <el-input placeholder="Business Email *" v-model="form.email" required />
                </el-form-item>
                <el-form-item prop="whatsOrTem">
                    <el-input placeholder="Whats or Telegram" v-model="form.whatsOrTem" />
                </el-form-item>
                <el-form-item prop="message">
                    <el-input placeholder="Message *" v-model="form.message" required maxlength="1000" type="textarea"
                        :autosize="{ minRows: 4, maxRows: 6 }" />
                </el-form-item>
                <el-form-item style="margin-bottom: 5px;">
                    <el-button class="confirm-button" colo style="width: 100%;" type="primary"
                        @click="submitForm(ruleFormRef)">Submit</el-button>
                </el-form-item>
                <div style="text-align: right; font-size: 0.7rem;">By clicking, you agree to our Privacy Policy.</div>
            </el-form>
        </section>
        <section></section>
    </div>
</template>


<script setup lang="ts" name="ContactView">
import { reactive, ref } from 'vue'
import appConfig from '@/utils/appConfig'
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
import { id } from 'element-plus/es/locales.mjs'

const form = reactive({
    name: '',
    companyName: '',
    companyWebsite: '',
    email: '',
    whatsOrTem: '',
    message: '',
})

const features = [
    {
        img: 'contact/contact_i1.png',
        desc: 'Solution Overview – Learn how our products and services can support your business.'
    },
    {
        img: 'contact/contact_i2.png',
        desc: 'Q&A Session – Speak with one of our experts to get answers specific to your business and learn how our solutions can address your challenges.'
    },
    {
        img: 'contact/contact_i3.png',
        desc: 'Interactive Consultation – We’ll discuss your business goals and share industry experience to help you achieve your ambition. '
    },
]

const ruleFormRef = ref<FormInstance>()

const rules = reactive<FormRules>({
    name: [
        { required: true, message: 'Please input your name', trigger: 'blur' },
        { min: 2, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
    ],
    companyName: [
        {
            required: true,
            message: 'Please input your company name',
            trigger: 'change',
        },
    ],
    companyWebsite: [
        {
            required: true,
            message: 'Please input your company website',
            trigger: 'change',
        },
    ],
    email: [
        {
            required: true,
            message: 'Please input email address',
            trigger: 'blur',
        },
        {
            type: 'email',
            message: 'Please input correct email address',
            trigger: ['blur', 'change'],
        },
    ],
    message: [
        { required: true, message: 'Please input Message', trigger: 'blur' },
        { min: 10, max: 1000, message: 'Length should be 10 to 1000', trigger: 'blur' },
    ],
})

const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            sendMail(formEl)
        } else {
            console.log('error submit!', fields)
        }
    })
}

function sendMail(formEl: FormInstance | undefined) {
    const email = appConfig.emailTo
    const subject = 'Hello HoneyBee';

    const mailBody = `Name:${form.name}\nCompanyName:${form.companyName}\nCompanyWebsite:${form.companyWebsite}\nWhatsApp or Telegram:${form.whatsOrTem}\n${form.message}`
    const mailToLink = `mailto:${email}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(mailBody)}`
    // 打开邮件客户端
    window.location.href = mailToLink
    resetForm(formEl)

    ElMessage({
        type: 'success',
        message: 'Send Success',
        grouping: true
    })
}

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}

</script>

<style scoped lang="scss">

.contact-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

.contact-desc {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;

    h2 {
        text-align: center;
    }

    ul {
        padding-top: 2rem;
        gap: 2rem;
        width: 100%;

        li {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1rem;
            background: #F5D623;

            img {
                width: 50px;
            }
        }
    }
}

.contact-form {
    width: 100%;
}

.confirm-button {
    color: black;
    font-size: 1.1rem;
    height: 50px;
}

@media (max-width: 650px) {
    .contact-desc {
        width: 100%;

        ul {
            width: 100%;
        }
    }

    .contact-form {
        width: 100%;
    }
}
</style>